<template>

  <el-aside width="" rel="MainAside">

<div class="app-logo" @click="collapse">
  <span v-if="isCollapse" class="iconfont icon-moreandroid"></span>
  <span v-else class="iconfont icon-sort"></span>
</div>

<el-menu 
:default-active.sync="asideActive"
class="el-menu-vertical-demo"
@open="handleOpen" 
@close="handleClose" 

background-color="#2b3740"
text-color="#fff"
active-text-color="#00a7f2"
:collapse="isCollapse" v-if="menus">

  <template v-for="menu,key in menus">
    <el-submenu v-if="menu.child" :index="key">
      <template slot="title">
        <i :class="menu.icon" style="margin-right: 5px;"></i>
        <span slot="title">{{menu.name}}</span>
      </template>

      <template v-for="submenu,subkey in menu.child">
        <el-menu-item v-if="!submenu.child" :index="subkey" @click="redirectTo(subkey, submenu.url)">{{submenu.name}} </el-menu-item>

        <el-submenu v-else :index="subkey">
          <span slot="title">{{submenu.name}}</span>
          <template v-for="item,itemkey in submenu.child">
            <el-menu-item :index="itemkey" @click="redirectTo(itemkey, item.url)">{{item.name}}</el-menu-item>
          </template>
        </el-submenu>
        
      </template>

    </el-submenu>
    <el-menu-item v-else :index="key" @click="redirectTo(key, menu.url)">
      <i :class="menu.icon" style="margin-right: 5px;"></i>
      <span slot="title">{{menu.name}}</span>
    </el-menu-item>

  </template>

</el-menu>

  </el-aside>

</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .app-logo {
    background: #00a7f2;
    height: 60px;
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }
  .app-logo span {
    width: 44px;
    height: 44px;
    font-size: 30px;
    color: #fff;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    line-height: 44px;
    border-radius: 100px;
  }
</style>

<script>

  const store = new Vuex.Store({
    state: {
      isCollapse: sessionStorage.getItem('isCollapse') === "1",
      asideActive: sessionStorage.getItem('asideActive') ? sessionStorage.getItem('asideActive') : window.asideActive
    },
    mutations: {
      toggleCollapse (state) {
        // mutate state
        state.isCollapse = !state.isCollapse;
        if (state.isCollapse) {
          sessionStorage.setItem('isCollapse', "1");
        } else {
          sessionStorage.setItem('isCollapse', "0");
        }
      },
      toggleActive(state, key) {
        state.asideActive = key;
        sessionStorage.setItem('asideActive', key);
      }
    }
  });

  export default {
    data() {
      return {
        isCollapse: store.state.isCollapse,
        asideActive: store.state.asideActive,
        menus: window.menus
      };
    },
    created() {

    },
    methods: {
      collapse() {
        this.isCollapse = !this.isCollapse;
        store.commit('toggleCollapse');
      },
      handleOpen(key, keyPath) {
        store.commit('toggleActive', key);
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath);
      },
      redirectTo(key, url) {
        store.commit('toggleActive', key);
        this.$redirectTo(url);
      }
    }
  }
</script>